import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { ListWrapper, ListItem, ItemRight, ItemLeft, Comment, CommentItem, Num, LoadMore } from '../style'
import { Link } from 'react-router-dom'

class List extends PureComponent {
    render() {
        let { articleList, changeLoadMore } = this.props
        return (
            <ListWrapper>
                {
                    articleList.map((item, index) => {
                        return (
                            <ListItem key={index}>
                                <ItemLeft>
                                    <Link to={'/detail/'+ item.get('id')}><div className="title">{item.get('title')}</div> </Link>
                                    <div className="desc">{item.get('content')}</div>
                                    <Comment>
                                        <CommentItem className="frist">
                                            <i className="iconfont">&#xe63d;</i>
                                            <Num>{item.get('Like')}</Num>
                                        </CommentItem>
                                        <CommentItem>
                                            {item.get('user')}
                                        </CommentItem>
                                        <CommentItem>
                                            <i className="iconfont">&#xe633;</i>
                                            <Num>{item.get('discuss')}</Num>
                                        </CommentItem>
                                        <CommentItem>
                                            <i className="iconfont">&#xe621;</i>
                                            <Num>{item.get('collect')}</Num>
                                        </CommentItem>
                                    </Comment>
                                </ItemLeft>
                                <ItemRight>
                                    <img className='img' src={item.get('imgUrl')} alt="" />
                                </ItemRight>
                            </ListItem>
                        )
                    })
                }

                <LoadMore onClick={changeLoadMore}>加载更多</LoadMore>
            </ListWrapper>
        );
    }
}

const mapState = (state) => {
    return {
        articleList: state.getIn(['home', 'articleList'])
    }
}

const mapDispatch = (dispatch) => {
    return {
        changeLoadMore() {
            dispatch(actionCreators.getLoadMore())
        }
    }
}

export default connect(mapState, mapDispatch)(List);